// 引入需要使用的样式
require("../css/motiondata.less")
require("../fonts/iconfont.css")
document.ready(function () {
    // 判断是否登录
    window.utils.isLogin();
    // 取出本地存储的数据（用户的id）
    const userId = window.localStorage.getItem("userId");
    const iconBack = document.querySelector("#iconBack") //返回按钮
    const img = document.querySelector("#img") // 用户头像
    const time = document.querySelector("#time") //时间
    const powr = document.querySelector("#powr") //卡路里
    const powrs = document.querySelector("#powrs") //卡路里
    const dayTimes = document.querySelector("#dayTimes") //累计天
    const counts = document.querySelector("#counts") //连续天
    // 返回上一层
    iconBack.addEventListener("click", function () {
        window.history.back()
    })
    // 用户头像
    window.$http.get(`users/accountinfo?userId=${userId}`, function (res) {
        if (res.status === 0) {
            const imgurl = res.data.imgurl; //头像
            if (imgurl) {
                img.src = 'http://139.9.177.51:8099' + imgurl;
            }
        }
    })
    // 运动数据
    {
        window.$http.get(`users/mysportsBadge?userId=${userId}`, function (res) {
            if (res.status === 0) {
                const times = parseInt(res.data.sports.times); //分钟
                const calorie = parseInt(res.data.sports.calorie); //卡路里
                time.textContent = times;
                powr.textContent = calorie;
                powrs.textContent = calorie;
            }
        })
        window.$http.get(`sport/data/${window.localStorage.getItem('userId')}`, function (res) {
            if (res.status === 0) {
                const dayTime = res.data.sumDays //累计
                const count = res.data.continueDays //连续天
                // 渲染数据
                dayTimes.textContent = dayTime
                counts.textContent = count
            }
        })
    }
    // 绘制近7天运动市场
    function drawWeekTimeChart(xData, yData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('weekTimeChart'));

        // 写配置 【查看官方文档 该配置 就可以了】
        var option = {
            // 标题
            title: {
                text: '近7天运动时长',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 500
                }
            },

            // 网格
            grid: {
                show: true,
                left: '10%',
                // backgroundColor: 'red',
            },

            // x轴
            xAxis: {
                type: 'category',
                data: xData,
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            series: [{
                data: yData,
                type: 'bar',
                itemStyle: {
                    color: 'green'
                },
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 绘制饼图： 运动分类
    function drawPie(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sportCateChart'));

        // 写配置 【查看官方文档 该配置 就可以了】
        var option = {
            title: {
                text: '运动分类',
            },
            tooltip: {
                trigger: 'item',
                formatter: '{d}%'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                data: ['跑步', '骑行', '训练']
            },
            series: [{
                name: '运动分类',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                label: {
                    position: 'inside',
                    formatter: "{d}%",
                },
                data: data, // 动态数据
                // 激活效果
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 发送ajax 获取运动数据
    window.$http.get(`sport/data/${window.localStorage.getItem('userId')}`, function (res) {
        let days = res.data.days;

        let xData = days.map(function (v) {
            return v.date.substr(-5)
        })
        let yData = days.map(function (v) {
            return +v.dayTimes
        })

        // 使用动态数据渲染柱状图
        drawWeekTimeChart(xData, yData)

        // 定义对象
        let obj = {
            '跑步': 0,
            '训练': 0,
            '骑行': 0
        }

        // 对分类数据进行归类
        days.forEach(function (v) {
            v.exerciseData.forEach(function (item) {
                obj[item.type] += parseInt(item.time)
            })
        })

        // 处理成echarts需要的数据
        let data = []
        for (let key in obj) {
            data.push({
                name: key,
                value: obj[key]
            })
        }

        // 渲染
        drawPie(data)
    })

})